<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .flex-container{
            display: flex;
            width: 200px;
            height: 400px;
           
        }
        .flex-item1{
            width: 50px;
            height: 100px;
            background-color: aqua;
            flex: 1; 
            /* flex :1即为flex-grow: 1 flex-shrink: 1 flex-basis: 0%  */
        }
    </style>
</head>
<body>
    <div class="flex-container">  
        <div class="flex-item1" >项目 1</div>  
        <div class="flex-item2">项目 2</div>  
      </div>
     <!-- flex-grow：指定项目在剩余空间中所占据的比例，默认值为0，表示项目不会伸展。当设置为正数时，表示该项可以扩展的比例，相对于其他Flex项的比例。


flex-shrink：指定项目在空间不足时的收缩比例，默认值为1，表示项目会按比例收缩。当设置为0时，该项不会收缩。


flex-basis：定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

 -->
</body>
</html>